<template>
  <view class="padding-lr-30">
    <view class="padding-top-150 flex-column flex-center margin-bottom-30">
      <image class="icon margin-bottom-30" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_success.png" />
      <text class="text-40 color-white text-bold">支付成功</text>
      <text class="text-40 color-error text-bold margin-top-16">{{ orderInfo.finishAmount }}元</text>
      <text class="text-28 color-t3 margin-top-40">购买会员：{{ orderInfo.productName }}</text>
      <text class="text-28 color-t3 margin-top-10">有效期至：{{ discountTime }}</text>
    </view>
    <tui-button @click="back">返回</tui-button>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateFormat } from '@/common/util'
export default {
  name: 'BuyVipSuccess',
  props: {
    chooseId: {
      type: String,
      default: ''
    },
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    discountTime() {
      const oneYear = 1000 * 60 * 60 * 24 * 365
      let nowDate = new Date()
      if (this.vipInfo.vipServiceInfoId === this.chooseId && this.vipInfo.expirationDate) nowDate = this.vipInfo.expirationDate
      const newDates = new Date(nowDate).getTime() + oneYear
      return dateFormat(newDates, 'YYYY年M月D日')
    },
    ...mapGetters({
      vipInfo: 'vipInfo'
    })
  },
  methods: {
    back() {
      this.jump()
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(top,150);

.icon{
  width:220rpx;
  height:220rpx;
}
</style>
